<template>
	<view >
		<image src="../../static/me/bg2.jpg" mode="" style="position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;"></image>
		<view style="padding-top: 5vh;z-index: 100;position: absolute;width: 100vw;" >
			<!-- 学生登录 -->
			<view v-if="userType == '学生'">
				<view style="padding: 5vh 5vw;">
					<view class="input-item">
						<text class="tit">用户名</text>
						<input  v-model="studentLoginForm.username" placeholder="建议使用姓名,用户名或手机号" maxlength="11" data-key="phone"/>
					</view>
					<view class="input-item">
						<text class="tit">密码</text>
						<input
							type="password"
							v-model="studentLoginForm.password"
							placeholder="长度在4-18之间"
							maxlength="18"
						/>
					</view>
					
					<button class="confirm-btn "  style="margin: 30rpx 0 10rpx 0;"  @click="toStudentLogin" :disabled="logining">用户名登录</button>
					<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="miniWechatLogin" :disabled="logining">微信授权登录</button>
					<button class="confirm-btn "  style="margin-top: 10rpx;" @click="guestLogin()" :disabled="logining">游客模式</button>
				</view>
			</view>

			<!-- 送水员登录 -->
			<view v-else>
				<view style="padding: 5vh 5vw;">
					<view class="input-item">
						<text class="tit">手机</text>
						<input type="number" v-model="workerLoginForm.phone" placeholder="请输入11位手机号" maxlength="11" data-key="phone" />
					</view>
					<view class="input-item">
						<text class="tit">密码</text>
						<input
							type="password"
							v-model="workerLoginForm.password"
							placeholder="6-18位不含特殊字符的数字、字母组合"
							maxlength="18"
						/>
					</view>

					<button class="confirm-btn" style="margin: 30rpx 0 10rpx 0;" @click="toWorkerLogin" :disabled="logining">手机登录</button>
					<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="miniWechatLogin" :disabled="logining">微信授权登录</button>
					<button class="confirm-btn "  style="margin-top: 10rpx;" @click="guestLogin()" :disabled="logining">游客模式</button>
				</view>
			</view>
			<view >
				<view style=" text-align: center;color: white;font-size: 20rpx;text-decoration:underline ">
					<text v-if="userType=='送水员'" @tap="userType = '学生'" >
						切换至学生
					</text>
					<text v-if="userType=='学生'" @tap="userType = '送水员'" >
						切换至送水员
					</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			logining: false,
			userType: '学生',
			// 送水员登录表单
			workerLoginForm: {
				phone: '',
				password: ''
			},
			// 学生登录表单
			studentLoginForm: {
				username: '',
				password: ''
			}
		};
	},
	onShow() {
		let studentLoginForm = uni.getStorageSync("studentLoginForm");
		if(studentLoginForm)
			this.studentLoginForm = studentLoginForm
		let workerLoginForm = uni.getStorageSync("workerLoginForm");
		if(workerLoginForm)
			this.workerLoginForm = workerLoginForm
		let userType = uni.getStorageSync('userType');
		if (userType) this.userType = userType;
	},
	methods: {
		/* 通用操作 start  */
		// 游客模式登录
		guestLogin() {
			let that = this;
			that.logining = true;
			if(that.userType == '学生'){
				that.$request('/student/login/guest', 'post', null, null, function() {
					that.logining = false;
				}).then(result => {
					uni.setStorageSync("userInfo", result.data);
					uni.setStorageSync("userType", that.userType);
					uni.reLaunch({
						url: '../me/index'
					});
				});
			}else {
				that.$request('/worker/login/guest', 'post', null, null, function() {
					that.logining = false;
				}).then(result => {
					uni.setStorageSync("userInfo", result.data);
					uni.setStorageSync("userType", that.userType);
					uni.reLaunch({
						url: '../me/index'
					});
				});
			}

		},
		/* 通用操作 end */

		/* 用户登录逻辑 start */
		// 学生登录
		async toStudentLogin() {
			let that = this;
			if(!that.studentLoginForm.username || that.studentLoginForm.username.length <= 0 || that.studentLoginForm.length > 11){
				that.$msg("请输入正确的用户名")
				return;
			}
			if(!that.studentLoginForm.password || that.studentLoginForm.password.length < 4
				|| that.studentLoginForm.password.length > 18){
				that.$msg("密码格式不正确" )
				return;
			}
			that.logining = true;
			that.$request('/student/login', 'post', that.studentLoginForm, null, function() {
				that.logining = false;
			}).then(result => {
				uni.setStorageSync("userInfo", result.data);
				uni.setStorageSync("userType", that.userType);
				uni.setStorageSync('studentLoginForm', that.studentLoginForm);
				uni.reLaunch({
					url: '../me/index'
				});
			});
		},
		// 微信小程序登录 通过code在服务器获取微信openid登录
		miniWechatLogin(e) {
			const that = this;
			that.logining = true;
			const { errMsg, userInfo } = e.detail;
			if (errMsg !== 'getUserInfo:ok') {
				uni.showModal({
					title: '提示',
					content: '您取消了授权登录，请重新授权',
					showCancel: false
				});
				return;
			}

			// let weixUserInfo = e.detail.userInfo // {avatarUrl, city, country, gender, nickname...}
			uni.login({
				provider: 'weixin',
				success: wxres => {
					that.logining = false;
					// eg: {code: "073BdF1w3us1mV2SRk1w3MDxpH3BdF1z", errMsg: "login:ok"}
					console.log('微信登录 获取到的code=', wxres.code);
					let wxLoginForm = {
						wxCode: wxres.code,
						wxAvatar: e.detail.userInfo.avatarUrl
					};
					let path = '';
					let errorHandler = null;
					if (this.userType == '学生') {
						path = '/student/login/wx';
					} else {
						path = '/worker/login/wx';
						errorHandler = function() {
							that.$msg('您的微信并未绑定任何账号', 2000);
						};
					}
					that.$request(path, 'post', wxLoginForm, errorHandler).then(result => {
						uni.setStorageSync("userInfo", result.data);
						uni.setStorageSync("userType", that.userType);
						uni.reLaunch({
							url: '../me/index'
						});
					});
				}
			});
		},
		/* 用户登录逻辑 end */


		/* 送水员登录逻辑 start */
		async toWorkerLogin() {
			const that = this;
			let phoneReg = /^1(3|4|5|7|8)\d{9}$/;
			if (!phoneReg.test(that.workerLoginForm.phone)) {
				that.$msg('手机号格式不正确');
			} else if (that.workerLoginForm.password.length < 6) {
				that.$msg('密码至少6位');
			} else {
				that.$request('/worker/login', 'post', that.workerLoginForm).then(result => {
					uni.setStorageSync("userInfo", result.data);
					uni.setStorageSync("userType", that.userType);
					uni.setStorageSync('workerLoginForm', that.workerLoginForm);
					uni.reLaunch({
						url: '../me/index'
					});
				});
			}
		}
		/* 送水员登录逻辑 end */
	}
};
</script>

<style lang="scss" scoped>
.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	height: 150upx;
	border-radius: 4px;
	margin-bottom: 10upx;

	&:last-child {
		margin-bottom: 0;
	}

	.tit {
		height: 50upx;
		line-height: 56upx;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
	}

	input {
		height: 80upx;
		line-height: 80upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
	}
}

.confirm-btn {
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	background: $uni-color-primary;
	color: #fff;
}

.section {
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 10px;
}
</style>
